import { ExtractPropTypes } from "vue"
import { Align, Aligns, TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'


/**
 * 辅助元素类型
 */
const TitleElements = ['leftVLine', 'leftPoint', 'bottomLine'] as const
export type TitleElement = typeof TitleElements[number]

/**
 * props参数
 */
export const titleProps = {
  /** 宽度, 默认单位rpx */
  width: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 高度, 默认单位rpx */
  height: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 子标题颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  subColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 辅助元素颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  elementColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 加粗字体 */
  fontBold: {
    type: Boolean,
    default: false
  },
  /** 对齐方式, 可选值为left center right */
  align: {
    type: String,
    default: '',
    validator: (value: Align | '') => {
      return value === '' || Aligns.includes(value)
    }
  },
  /** 标题自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 子标题内容 */
  subTitle: {
    type: String,
    default: ''
  },
  /** 左图标 */
  leftIcon: {
    type: String,
    default: ''
  },
  /** 右图标 */
  rightIcon: {
    type: String,
    default: ''
  },
  /** 辅助元素类型 leftVLine 左边垂直线 leftPoint 左边小点 bottomLine 底部横线, 辅助元素自由在左对齐时生效 */
  elementType: {
    type: String,
    default: '',
    validator: (value: TitleElement | '') => {
      return value === '' || TitleElements.includes(value)
    }
  }
}
export type TitleProps = ExtractPropTypes<typeof titleProps>